<script lang="ts" setup>
import { ref } from 'vue'
import wsjzglService from '@/api/wsjzgl'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['submitSczq'])

const props = defineProps({
  imgData: {
    type: String,
    required: true,
  },
})

const isLoading = ref(false)

//打开窗口

const dialogVisible = ref(false)
const currentItem = ref<any>({})
const currendNodeData = ref<any>({})
const issfzdqyBoo = ref<boolean>(false)
const zhxs = ref(10)
const openDialog = (data: any, issfzdqy: boolean, currendNode?: any) => {
  currentItem.value = data
  currendNodeData.value = currendNode
  issfzdqyBoo.value = issfzdqy
  zhxsChange(10)
  dialogVisible.value = true
}

const scfileUrl = ref('')

// 滑块变化
const zhxsChange = (val: any) => {
  const params = {
    jpgwjxh: currentItem.value.jpgwjxh,
    wjbh: currentItem.value.wjbh,
    bhxs: val,
    height: issfzdqyBoo.value ? Number(currendNodeData.value?.height) : undefined,
    hzb: issfzdqyBoo.value ? currendNodeData.value?.hzb : undefined,
    sfzdqy: issfzdqyBoo.value,
    width: issfzdqyBoo.value ? Number(currendNodeData.value?.width) : undefined,
    zzb: issfzdqyBoo.value ? currendNodeData.value?.zzb : undefined,
  }
  wsjzglService
    .pictureSczq(params)
    .then((res) => {
      scfileUrl.value = 'data:image/png;base64,' + res.data.base64Str
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

// 保存
const save = () => {
  emit('submitSczq', scfileUrl.value)
  closeDialog()
}

/*
 * 关闭弹框
 */
const closeDialog = () => {
  dialogVisible.value = false
  zhxs.value = 10
}

defineExpose({ openDialog })
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="色彩加强"
    width="40%"
    :close-on-click-modal="false"
    :before-close="closeDialog"
  >
    <div class="brightContent">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-image :src="props.imgData"></el-image>
          <p>调整前</p>
        </el-col>
        <el-col :span="12">
          <el-image :src="scfileUrl"></el-image>
          <p>调整后</p>
        </el-col>
      </el-row>
      <el-slider :min="1" :max="100" v-model="zhxs" @change="zhxsChange"></el-slider>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="save()" :loading="isLoading">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style></style>
